<template>
  <div class="remind">
    <!-- 查询状态 新建 搜索 -->
    <div class="remind-header">
      <el-form :inline="true" class="remind-header__form">
        <el-form-item label="状态 :">
          <el-select v-model="form.status" placeholder="全部">
            <el-option label="已确认" value="已确认"></el-option>
            <el-option label="待确认" value="待确认"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="remind-header__btn" @click="onSearch">搜索</el-button>
          <el-button type="primary" class="remind-header__btn" @click="toAddRemind">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="remind-container">
      <el-table :data="tableData" style="width: 100%" class="remind-table">
        <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" width="240" align="center"></el-table-column>
        <el-table-column prop="content" label="内容" width="700" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="380" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" width="155" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.status === 2 ? 'red-dot': 'blue-dot'">{{ scope.row.status | formatStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <span class="remind-table__handle remind-table__edit" @click="handleEdit(scope.$index, scope.row)">编辑</span>
            <span class="remind-table__handle" @click="handleDelete(scope.$index, scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { Form, FormItem, Select, Option, Button, Table, TableColumn } from 'element-ui'

export default {
  data () {
    return {
      form: {
        status: ''
      },
      tableData: [{
        id: '1',
        title: '禁饮禁食提醒',
        content: '1.禁饮禁食别喝水别喝水别喝水别喝水啊啊啊啊啊',
        createTime: '2020-12-12  12:00',
        status: 2,
      }, {
        id: '2',
        title: '123',
        content: '123',
        createTime: '2020-12-12  12:00',
        status: 1,
      }, {
        id: '3',
        title: '123',
        content: '123',
        createTime: '123',
        status: 1,
      }, {
        id: '4',
        title: '123',
        content: '123',
        createTime: '123',
        status: 1,
      }]
    }
  },
  components: {
    ElForm: Form,
    ElFormItem: FormItem,
    ElSelect: Select,
    ElOption: Option,
    ElButton: Button,
    ElTable: Table,
    ElTableColumn: TableColumn
  },
  filters: {
    formatStatus (code) {
      const status = {
        '1': '已确认',
        '2': '未确认'
      }
      return status[code] || ''
    }
  },
  methods: {
    // 搜索
    onSearch () {
      console.log('soushou');
    },

    // 跳转 新建强提醒
    toAddRemind () {
      this.$router.push({ name: 'addRemind' })
    },

    // 编辑
    handleEdit (index,row) {
      console.log(index,row,'------');
    },

    // 删除
    handleDelete (index,row) {
      console.log(index,row,'------');
    }
  }
}
</script>

<style lang="scss" scoped>
.remind-header {
  &__form {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  &__btn {
    margin-left: 24px;
  }
}
.remind-table {
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  color: #333333;
  .red-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #BF1414;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .blue-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #388FFB;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  &__handle {
    color: #388FFB;
  }
  &__edit {
    margin-right: 24px;
  }
}

</style>

<style lang="scss">
.remind {
  margin: 50px 56px 50px 56px;
}
.remind-header {
  .el-button {
    width: 90px;
    height: 49px;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
  }
}
.remind-container {
  .el-table {
    thead {
      font-size: 28px;
      font-weight: 400;
      line-height: 40px;
      color: #333333;
    }
    .cell {
      line-height: 45px;
    }
  }

}
</style>